<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>实时报警信息</legend>
    </fieldset>
    <table id="demo" lay-filter="test" style="margin-top:50px;margin-left: 40px;" class="layui-hide"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-sm" lay-event="edit">报警详情</a>
      </script>

    <script src="layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

    <script>
        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#demo'
                , height: 'full-100'
                , url: 'test/table/alarmtable.json' //数据接口
                , cols: [[ //表头
                    { field: 'eqClass', title: '报警级别', width: 200, sort: true, fixed: 'left', align: 'center' }
                    , { field: 'eqType', title: '设备类型', width: 240 }
                    , { field: 'eqName', title: '设备名称', width: 240 }
                    , { field: 'alarm', title: '报警详情', width: 453, align: 'center' }
                    , { field: 'alarmTime', title: '报警时间', width: 240 }
                    , { field: 'reTime', title: '恢复时间', width: 240, }
                    , { field: 'times', title: '报警次数', width: 180, sort: true }
                    , { field: 'score', title: '操作', toolbar: '#barDemo', width: 115 }
                ]]
                , page: {
                    layout: ['count', 'prev', 'page', 'next', 'skip']
                    , groups: 1
                    , first: false
                    , last: false
                } //开启分页  
            });
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                layer.open({
                    type: 2 //此处以iframe举例
                    , id: 'top3'
                    , area: ['900px', '600px']
                    , content: ['histogram.html', 'no']
                });
            });
        });
    </script>

</body>
</body>

</html>